<template>
  <view class="container">
    <view style="text-align: center;padding-top: 15px;">详情列表图:</view>

    <view class="avatar">
      <!-- 上传组件 -->
      <u-upload
        name="product_img"
        :maxCount="6"
        :fileList="filelist1"
        width="100"
        height="100"
        @delete="del1"
        @afterRead="read1"
      />
    </view>
    <view class="content">
      <u-form
        labelPosition="left"
        labelWidth="60"
        :model="service"
        :rules="rules"
        ref="product"
      >
        <!-- 名称 -->
        <u-form-item label="标题" prop="name">
          <u-input v-model="service.name" placeholder="请输入会员套餐名称" />
        </u-form-item>

        <view class="Box">
          <view
            v-for="(value, key) in service.carwashdata"
            :key="key"
            class="checkbox-container"
          >
            <checkbox
              @click="changebox({id:value.id,checked:value.checked,num:value.num})"
              class="checkbox"
              
              :checked="JSON.parse(value.checked)"
            ></checkbox>
            <text class="service-name">{{ value.title }}</text>
            <input
            
              class="service-count"
              type="number"
              v-model="value.num"
            />
          </view>
        </view>

        <!-- 商品描述 -->
        <u-form-item label="简介" prop="detaile" borderBottom>
          <u-textarea
            placeholder="不低于3个字"
            v-model="service.detaile"
            count
          ></u-textarea>
        </u-form-item>
       
		<u-form-item
          label="活动期限"
          prop="actdate_text"
          borderBottom
          @click="
            activeshow = true;
            hideKeyboard1();
          "
        >
          <u--input
            v-model="service.actdate_text"
            disabledColor="#ffffff"
            placeholder="请输入套餐活动期限"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <!-- 全款 -->
        <u-form-item label="套餐价格" prop="free">
          <u-input
            type="number"
            v-model="service.free"
            placeholder="请输入套餐服务费用"
          />
        </u-form-item>
        <u-form-item label="有效期限(天)" prop="dateyx">
          <u-input
            v-model="service.dateyx"
            placeholder="请输入会员卡有效期限"
          />
        </u-form-item>
        <u-form-item label="折扣" prop="zhekou">
          <u-input
            v-model="service.zhekou"
            placeholder="请输入折扣"
          />
        </u-form-item>

        <u-form-item label="背景图">
          <view class="avatar">
            <!-- 上传组件 -->
            <u-upload
              name="product_img"
              :maxCount="1"
              :fileList="filelist"
              width="100"
              height="100"
              @delete="del"
              @afterRead="read"
            />
          </view>
        </u-form-item>

        <u-datetime-picker
          :show="activeshow"
          :value="date"
          mode="date"

          @confirm="dateActiveConfirm"
          @cancel="dateActiveClose"
          @close="dateActiveClose"
        ></u-datetime-picker>
        <u-datetime-picker
          :show="showdate"
          :value="date"
          mode="date"

          @confirm="dateConfirm"
          @cancel="dateClose"
          @close="dateClose"
        ></u-datetime-picker>

        <!-- 提交按钮 -->
        <u-button
          text="添加套餐"
          icon="pushpin"
          size="small"
          type="success"
          :customStyle="btnStyle"
          @click="product"
        />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
	
  <script>
export default {
  onLoad() {
    this.auth = this.$u.auth.check();
    this.getallcarwash()
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      date: Number(new Date()),
      filelist: [],
      filelist1: [],
      auth: {},
      piclist:[],
      newlist:[],
      newthumbArr:[],
      showdate:false,
	    activeshow:false,
      thumbs_text: "",
      service: {
        name: "",
        detaile: "",
        actdate_text: "",
        carwash: "",
        free: "",
        dateyx:"",
		    zhekou:"",
        carwashdata:{

        }
		
      },

      rules: {
        detaile: {
          required: true,
          message: "不低于3个字",
          trigger: ["change"],
        },
        zhekou: {
          required: true,
          message: "折扣不能为空",
          trigger: ["change"],
        },
        name: {
          required: true,
          message: "请填写套餐标题",
          trigger: ["blur", "change"],
        },

        createtime_text: {
          required: true,
          message: "创建时间不能为空",
          trigger: ["blur", "change"],
        },
        free: {
          required: true,
          message: "服务费用不能为空",
          trigger: ["blur", "change"],
        },
        actdate_text: {
          required: true,
          message: "会员套餐活动期限不能为空",
          trigger: ["blur", "change"],
        },
        dateyx: {
          required: true,
          message: "会员套餐有效期限不能为空",
          trigger: ["blur", "change"],
        },
      
        free: {
          required: true,
          message: "会员套餐费用不能为空",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  methods: {
    changebox(e)
    {
      this.service.carwashdata.forEach((item,inex)=>{
        if(item.id == e.id)
        {
         if(item.checked === e.checked)
         {
            item.checked != e.checked
            this.newlist.push(item)
         }
        }
      })
    },
    // 获取所有的服务分类
    async getallcarwash()
    {
      let data = {
        adminid:this.auth.id
      }

      let result = await this.$u.api.business.allcarwashtype(data)
      if(result.code)
      {
        this.service.carwashdata =  result.data
      }
    },
    dateActiveClose() {
      this.activeshow = false;
    },
    dateActiveConfirm(e) {
      this.activeshow = false;
      this.service.actdate_text = uni.$u.timeFormat(e.value, "yyyy-mm-dd");
      console.log(this.service.actdate_text);
    },
    hideKeyboard1() {
      uni.hideKeyboard();
    },
   
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        this.service.thumb_text = result.data;
        this.newthumbArr = this.newthumbArr.concat(result.data)

        // 合并对象
        this.filelist = [{ url: result.data }];
        return false;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    async read1(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist1 = this.filelist1.concat({ url: result.data });
        this.newthumbArr = this.newthumbArr.concat(result.data)


        let userArray = Object.entries(this.filelist1).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 截取想要部分路径

          // 把想要的路径追加到数组
          this.piclist.push(item.value.url);
        });
        // 数组的去重
        let qcarr = [...new Set(this.piclist)];

        // 数组转化成字符串
        this.service.imagelist = qcarr.join(",");
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },

     product() {
      let urlArray = this.filelist1.map(item => item.url);

      this.$refs.product
        .validate()
        .then( async () => {
          var data = {
            name: this.service.name,
            free: this.service.free,
            adminid: this.auth.id,
            imagelist: urlArray,
            detaile: this.service.detaile,
            thumb: this.service.thumb_text,
            dateyx:this.service.dateyx,
			      activityDuration:this.service.actdate_text,
            carwashdata: this.service.carwashdata,
			      zhekou:this.service.zhekou,
            newthumbArr:this.newthumbArr
          }

          let result = await this.$u.api.business.leveladd(data);
       
          if (result.code) {
            
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
                //返回上一个界面
                uni.$u.route({
                  type: "reLaunch",
                  url: "/pagesD/level/index",
                });
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },

    async del(e) {
      let data = {
        adminid: this.auth.id,
        url: e.file.url,
      };

      var result = await this.$u.api.business.delimage(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1000,
          complete: () => {
           

              this.filelist = [];
              this.service.thumb_text = ""
          },
        });
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
          duration: 1000,
        });
      }
    },
    del1(e) {
       this.filelist1.map(async (item, index) => {
        // this.filelist(index, 1)

        if (index == e.index) {
          // 删除数组中的某一项

          let data = {
            adminid: this.auth.id,
            leveid: this.leveid,
            url: e.file.url,
          };

          var result = await this.$u.api.business.delthumb(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 800,
              complete: () => {

                this.filelist1.splice(e.index, index);
                
                // 还剩余一张的时候清空
                if (index == 0 && e.index == 0) {
                  this.filelist1 = [];
                  this.service.imagelist = ""
                }
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 1200,
            });
          }
        }
      });
    },
  },
}
</script>
	
  <style >
  .Box {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.checkbox {
  margin-left: 6px;
}

.service-name {
  /* flex: 1; */
  width: 85px;
  margin-left: 3px;
  font-size: 15px;
}

.service-count {
  width: 25px;
}
.content {
  padding: 10px;
}
.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
  /* display: flex; */
  /* align-items: center; */
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.name {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}
</style>
	